/* 数据集合 */
<template>
  <div class="jsonarrayfield-config">
    <je-form-item label="控制方式" name="controlMode">
      <je-select v-model:value="formState.controlMode" :options="controlModeSelectOptions" />
    </je-form-item>

    <je-form-item label="按钮位置" name="buttonLocation">
      <je-select v-model:value="formState.buttonLocation" :options="buttonLocationOptions" />
    </je-form-item>

    <je-form-item label="集合规划" name="ensembleProgramming">
      <je-tooltip placement="top" title="编辑">
        <span @click="clickEnsembleProgramming(formState.ensembleProgramming)"
          ><i
            class="fas fa-bolt"
            :style="`cursor:pointer;color:${
              formState.ensembleProgramming ? '#F4CE4A' : '#8d98ab'
            } `"
          ></i
        ></span>
      </je-tooltip>
      <span class="prompt">规划对象集合的表达样式</span>
    </je-form-item>
  </div>
</template>
<script>
  import { defineComponent, reactive, watch } from 'vue';
  import { Form, Select, Modal } from '@jecloud/ui';
  import { decode } from '@jecloud/utils';
  import { useInjectOtherCOnfig } from '../context';
  import { listenerEditorModal } from '@/helper/index.js';

  export default defineComponent({
    name: 'JsonArrayConfig',
    components: {
      JeFormItem: Form.Item,
      JeSelect: Select,
    },
    props: {
      otherConfig: {
        type: String,
        default: '',
      },
    },
    setup(props, { expose }) {
      const parentContext = useInjectOtherCOnfig();
      const config = (props.otherConfig && decode(props.otherConfig ?? '{}')) ?? {};
      const formState = reactive({
        controlMode: config.controlMode || 'codeControl', // 控制方式
        buttonLocation: config.buttonLocation || '', //按钮为孩子
        ensembleProgramming: config.ensembleProgramming || '', //集合规划
      });
      const controlModeSelectOptions = [
        { value: 'codeControl', label: '代码控制' },
        { value: 'funcControl', label: '功能控制' },
      ];
      const buttonLocationOptions = [
        { value: 'left', label: '左侧' },
        { value: ' right', label: '右侧' },
      ];
      const clickEnsembleProgramming = (value) => {
        listenerEditorModal({
          eventType: 'default',
          eventInfo: value,
          callback: (obj) => {
            formState.ensembleProgramming = obj.eventInfo;
            Modal.message('保存成功', 'success');
          },
        });
      };

      watch(
        () => formState,
        () => {
          parentContext.setConfig(formState);
        },
        { deep: true },
      );

      //暴露表单值用于父组件赋值
      expose({
        formState,
      });

      return {
        formState,
        controlModeSelectOptions,
        buttonLocationOptions,
        clickEnsembleProgramming,
      };
    },
  });
</script>
<style lang="less" scoped></style>
